<template>
  <!-- img必须设置不允许拖动，draggable属性，否则触发画布的onDrop事件   -->
  <div
    class="my-container"
    @click="showParam"
    :style="{
      width: detail.position.w-4 + 'px',
      height: detail.position.h-4 + 'px',
  }"
  >
    <q-img
      :src="param.imgURL"
      :style="{
        'width': detail.position.w-4 + 'px',
        'height': detail.position.h-4 + 'px'
      }"
    >
      <div class="absolute-top text-center">
        {{param.title}}
      </div>
    </q-img>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, ref, toRefs, PropType, watch, toRef  } from 'vue';
import { CGraphEntity, CVariableDataItem } from 'stores/editorModels';
import { CRecyclingWaterTankPropertyItem } from './RecyclingWaterTankViewModel'
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
const RecyclingWaterTankParamsDlg = defineAsyncComponent(() => import('./paramViews/RecyclingWaterTankParams.vue'));
export type RecyclingWaterTankParamsDlgInstance = InstanceType<typeof RecyclingWaterTankParamsDlg>;

export default defineComponent({
  name: 'ViewRecyclingWaterTank',
  props: {
    detail: {
      type: Object as PropType<CGraphEntity>,
      required: true
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },
  components: {
    RecyclingWaterTankParamsDlg  
  },
  setup (props) {
    //数据解构
    const {
      detail
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CRecyclingWaterTankPropertyItem>({
      title: '',
      imgURL: '',
    });


    //初始化
    const init = () => {
      param.value.title = detail.value.comLabel;
      param.value.imgURL = detail.value.graphUrl;
      //个性化属性
      if ((detail.value) && (detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {          
        //param.value.dayOutWater = parseFloat(detail.value.propsItem[0].value)
      } else {
        //showMessage('Image 属性不符！');
      }
    };

    let myRecyclingWaterTankParamsDlgRef = ref<RecyclingWaterTankParamsDlgInstance|null>(null);

    const showParam = () => {
      debugger
      if(myRecyclingWaterTankParamsDlgRef.value) {
        myRecyclingWaterTankParamsDlgRef.value.show('设置回收水罐参数')
      }
    };

    

    // 监视数据变化,detail每个属性变化都能监听到
    watch(() => detail, () => {
      //发生变化时更新数据
      init();
    }, { deep: true });

    // 挂载组件
    onMounted(() => {
      init();
    });

    return {
      detail,
      param,
      myRecyclingWaterTankParamsDlgRef,
      showParam
    };
  }
});
</script>

<style lang="scss" scoped>
.my-container {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 10px;
  bottom: 10px;
  text-align: left;
}
</style>
